<template>
	<!-- 主体内容区域 -->
	<div class="Z_main">
		<!-- 头部区域 -->
		<div class="top">
			<h5>订单</h5>
		</div>
		<!-- 标题导航区域 -->
		<div class="nav">
			<h4>订单筛选</h4>
			<!-- 标题右侧内容区域 -->
			<div class="nav_wrap">
				<span class="r-38">订单状态</span>
				<span>
					<el-select v-model="value" clearable placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
							class="el-input__inner r-38" style="width: 120px;" v-model="serachList.sechOne" />
					</el-select>
				</span>
				<span class="r-38">提交时间</span>
				<span>
					<el-date-picker v-model="serachList.sechTwo" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" @change="getList"
						:disabledDate="disablesDate" />
				</span>
				<span class="l-38 r-38">
					<input type="text" class="ipt" placeholder="请输入订单号,用户账号,昵称" v-model="serachList.sechThree">
				</span>
				<div class="icon">
					<span class="img">
						<!-- <img src="../img/羽毛球.png" /> -->
						<img src="../assets/pict.png" alt="" />
					</span>
					<span class="icon-p" @click="SearchUsers()">筛选</span>
				</div>
			</div>
		</div>
		<!-- 底部区域 -->
		<div class="bottom">
			<div class="p">
				<h4>订单列表</h4>
			</div>
			<div class="line"></div>
			<!-- 底部表明字段区域 -->
			<ul class="list">
				<li>
					<input type="checkbox" />
					<span>订单编号</span>
					<span>用户昵称</span>
					<span>手机号</span>
					<span>课程名称</span>
					<span>订单金额</span>
					<span>订单状态</span>
					<span>提交时间</span>
					<span>操作</span>
				</li>
				<li v-for="(item, index) in person">
					<input type="checkbox" />
					<span>{{ index + 1 }}</span>
					<span>赵进涛</span>
					<span>{{ item.phone }}</span>
					<span>{{ item.name }}</span>
					<span>{{ item.price }}</span>
					<span>{{ item.state_s }}</span>
					<span>{{ item.up_tim }}</span>
					<span class="btn">
						<button @click="CheckUsers()">查看</button>
						<button @click="DelUsers(index)">删除</button>
					</span>
				</li>
			</ul>
			<li class="list-bottom">
				<div class="left">
					<input type="checkbox" />
					<span>全选</span>
					<span class="green">批量导出</span>
				</div>
				<div class="right">
					<span class="num">共400条</span>
					<span class="pages">100条/页</span>
					<div class="page">
						<span>&lt;</span>
						<span>1</span>
						<span>2</span>
						<span>3</span>
						<span>4</span>
						<span>&gt;</span>
					</div>
					<div class="goto">
						<span>前往</span>
						<span class="arc">4</span>
						<span>页</span>
					</div>
				</div>
			</li>
		</div>
	</div>
	<!-- 修改页面区域 -->
	<div style="display: flex; align-items: center">
		<el-popover placement="right" :width="400" trigger="click">
			<template #reference>
				<el-button style="margin-right: 16px">Click to activate</el-button>
			</template>
			<el-table :data="gridData">
				<el-table-column width="150" property="date" label="date" />
				<el-table-column width="100" property="name" label="name" />
				<el-table-column width="300" property="address" label="address" />
			</el-table>
		</el-popover>

		<el-popover :width="300"
			popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
			<template #reference>
				<el-avatar src="https://avatars.githubusercontent.com/u/72015883?v=4" />
			</template>
			<template #default>
				<div class="demo-rich-conent" style="display: flex; gap: 16px; flex-direction: column">
					<el-avatar :size="60" src="https://avatars.githubusercontent.com/u/72015883?v=4"
						style="margin-bottom: 8px" />
					<div>
						<p class="demo-rich-content__name" style="margin: 0; font-weight: 500">
							Element Plus
						</p>
						<p class="demo-rich-content__mention"
							style="margin: 0; font-size: 14px; color: var(--el-color-info)">
							@element-plus
						</p>
					</div>

					<p class="demo-rich-content__desc" style="margin: 0">
						Element Plus, a Vue 3 based component library for developers,
						designers and product managers
					</p>
				</div>
			</template>
		</el-popover>
	</div>
</template>

<script>
import {
	ref
} from 'vue'

import { odOrder, delOdOrder, sechOdOrder } from '../api/api.js'

export default {
	setup() {
		// 修改的数据
		const gridData = [
			{
				date: '2016-05-02',
				name: 'Jack',
				address: 'New York City',
			},
			{
				date: '2016-05-04',
				name: 'Jack',
				address: 'New York City',
			},
			{
				date: '2016-05-01',
				name: 'Jack',
				address: 'New York City',
			},
			{
				date: '2016-05-03',
				name: 'Jack',
				address: 'New York City',
			},
		]
		const value = ref('');
		// 空数组存放数据
		const person = ref([]);
		// 存放删除，修改的索引
		const _index = ref(0);
		// 搜索的字段数组
		const serachList = ref(
			{
				sechOne: '',
				sechTwo: '',
				sechThree: ''
			}
		)
		const searchTest = ref('');

		// 存放字段名的数组
		const Newperson = ref({
			name: '',
			state_s: '',
			price: '',
			up_tim: '',
			phone: '',
			ifFlg: true
		})
		const options = [
			{
				value: '未上架',
				label: '未上架',
			},
			{
				value: '上架',
				label: '上架',
			},
		]
		return {
			value,
			options,
			person,
			_index,
			searchTest,
			Newperson,
			serachList
		}
	},
	disablesDate(time) {
		const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 7 //最小时间可选前七天
		const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 1 //最大时间可选今天
		return time.getTime() <= _maxTime || time.getTime() > _minTime
	},
	// 过载后，自动全部获取刷新
	mounted() {
		this.AllUsers();
	},
	methods: {
		// 获取全部
		AllUsers() {
			odOrder()
				.then(res => {
					// this.person = res.data.list;
					console.log(res)
					const _data = res.data.list;
					this.person = _data;
					console.log(this.person);
				})
				.catch(err => {
					console.log(err);
				})
		},
		// 删除
		DelUsers(index) {
			console.log(index)
			const serNum = this.person[index].name;
			const data = { serNum }
			console.log(data)
			delOdOrder(data)
				.then(res => {
					console.log(res)
					this.AllUsers();
				})
				.catch(err => {
					console.log(err)
				})
		},
		// 搜索
		SearchUsers() {
			const sech_one = this.serachList.sechOne
			const sech_two = this.serachList.sechTwo
			const sech_three = this.serachList.sechThree
			const each_data = { sech_one, sech_two, sech_three }
			sechOdOrder(each_data)
				.then(res => {
					console.log(res.data)
					this.person = res.data.list
				})
				.catch(err => {
					console.log(err)
				})
		},
		// 查看用户信息
		CheckUsers() {
			console.log("aaa");
		}
	}
}
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.select,
.el-input__inner {
	width: 120px !important;
}

.Z_main {
	width: calc(100% - 60px);
	/* height: 100vh; */
	background-color: #f0f0f0;
	padding: 35px 30px;
}

.top {
	margin-bottom: 30px;
}

.nav,
.bottom {
	width: calc(100% - 60px);
	padding: 30px;
	background-color: #fff;
}

.nav {
	height: 60px;
	margin-bottom: 20px;
}

.nav>h4 {
	margin-bottom: 10px;
}

.nav_wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.bottom {
	height: 600px;
}

.bottom>.p {
	width: 100%;
	height: 40px;
	line-height: 20px;
}

.line {
	width: 100%;
	height: 25px;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
}

.list {
	width: 100%;
	height: 503px;
}

.list>li {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 50px;
	font-weight: bold;
	border-bottom: 1px solid #f0f0f0;
}

.list>li:nth-child(1) {
	height: 43px;
}

.list>li>input {
	flex: 1;
	border: 1px solid #38a28a;
}

.list>li>span {
	flex: 1;
	text-align: center;
}

.list>li>input {
	width: 18px;
	height: 18px;
}

.r-38 {
	margin-right: 38px;
}

.l-38 {
	margin-left: 38px;
}

.ipt {
	width: 180px;
	height: 28px;
	padding: 0 18px;
	border-radius: 8px;
	outline: none;
	border: 2px solid #dcdfe6;
}

.icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 76px;
	height: 32px;
	background-color: #38a28a;
	border-radius: 5px;
}

.icon-p {
	color: #fff;
	font-size: 12px;
	cursor: pointer;
}

.img {
	width: 20px;
	height: 20px;
}

.img>img {
	width: 100%;
	height: 100%;
}

.btn {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.btn>button {
	outline: noen;
	width: 50px;
	height: 30px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	background-color: #fff;
}

.btn>button:nth-child(1) {
	color: #38a28a;
	text-align: right;
}

.btn>button:nth-child(2) {
	color: red;
	text-align: left;
}

.list-bottom {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.list-bottom>input {
	float: left;

}

.list-bottom>.left {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.left>input {
	width: 18px;
	height: 18px;
}

.list-bottom>.left>span {
	margin-left: 18px;
}

.list-bottom>.left>.green {
	color: rgb(56, 162, 138);
}

.list-bottom>.right {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.page {
	width: 215px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.goto {
	width: 128px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.goto>span:nth-child(1) {
	margin-right: 15px;
}

.goto>span:nth-child(3) {
	margin-left: 15px;
}

.arc {
	width: 48px;
	height: 26px;
	border: 1px solid #8e8e8e;
	border-radius: 4px;
	text-align: center;
	line-height: 26px;
}

.num {
	margin-right: 15px;
}
</style>

<style>
@import url(../assets/index.css);
</style>
